<template>
  <!--  默认有搜索框 -->
  <div class="information-tab-wrap flex-center-start">
    <!-- tabs -->
    <div
      class="information-tab flex-center"
      v-for="item in tabs"
      :key="item.id"
      :class="selectedId == item.id ? 'active' : ''"
      @mouseover="selectedId = item.id"
      @mouseleave="selectedId = defaultSelectedId"
      @click="changeTab(item.id)"
    >
      {{ item.name }}
    </div>
    <!-- 搜索框 -->
    <div class="pro-search">
      <el-input
        placeholder="搜索"
        prefix-icon="el-icon-search"
        v-model="inputVal"
        size="mini"
        maxlength="100"
      >
      </el-input>
    </div>
    <!-- 标签检索 -->
    <div class="pro-search pro-select">
      <el-select
        v-model="selectVal"
        placeholder="请选择"
        size="mini"
        @change="getSelectVal"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVal: '',
      selectVal: '1',
      options: [
        {
          label: '标签检索',
          value: '0',
        },
        {
          label: '情报目录',
          value: '1',
        },
      ],
      tabs: [
        {
          name: '图像',
          id: 'image',
        },
        {
          name: '视频',
          id: 'video',
        },
        {
          name: '资料',
          id: 'doc',
        },
      ],
      defaultSelectedId: 'image',
      selectedId: 'image',
    }
  },
  methods: {
    // tab切换方法
    changeTab(id) {
      this.selectedId = id
      this.defaultSelectedId = id
      this.$emit('toggleTabs', id)
    },
    getSelectVal(val) {
      if (val === '0') {
        this.$router.push('/productManagement')
      } else if (val === '1') {
        this.$router.push('/Information-catalogue')
      }
    },
  },
}
</script>

<style lang="scss">
.information-tab-wrap {
  padding-left: 0.2rem;
  height: 0.5rem;
  border-bottom: 1px solid #034475;
  font-size: 0.16rem;
  padding-top: 0.05rem;
  .information-tab {
    position: relative;
    height: 100%;
    width: 1.3rem;
    color: #cccccc;
    cursor: pointer;
    &.active {
      color: #2acaff;
      &:after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 0.04rem;
        background: #2acaff;
      }
    }
  }
  .pro-search {
    margin-left: 42%;
    .el-input--mini .el-input__inner {
      color: #cccccc;
      background-color: #034576;
      border: 0px;
    }
  }
  .pro-select {
    width: 1.5rem;
    margin-left: 2%;
  }
}
</style>
